{% extends 'base.html' %}

{% block title %}{{ service.name }} - Service Details{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h2 class="mb-0">{{ service.name }}</h2>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h5>Service Information</h5>
                            <p class="mb-1"><strong>Duration:</strong> {{ service.duration|time:"H:i" }} hours</p>
                            <p class="mb-1"><strong>Price:</strong> ${{ service.price|floatformat:2 }}</p>
                            <p class="mb-1"><strong>Active:</strong> {% if service.is_active %}<span class="text-success">Yes</span>{% else %}<span class="text-danger">No</span>{% endif %}</p>
                        </div>
                        <div class="col-md-6">
                            <h5>Description</h5>
                            <p>{{ service.description|default:"No description provided." }}</p>
                        </div>
                    </div>

                    <div class="mt-4">
                        <h5>Upcoming Appointments</h5>
                        {% if appointments %}
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Date & Time</th>
                                            <th>Client</th>
                                            <th>Staff</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for appointment in appointments %}
                                            <tr>
                                                <td>{{ appointment.start_time|date:"M d, Y H:i" }}</td>
                                                <td>{{ appointment.client.get_full_name|default:appointment.client.username }}</td>
                                                <td>{{ appointment.staff.user.get_full_name|default:appointment.staff.user.username }}</td>
                                                <td><span class="badge {% if appointment.status == 'completed' %}bg-success{% elif appointment.status == 'cancelled' %}bg-danger{% else %}bg-warning{% endif %}">
                                                    {{ appointment.get_status_display }}
                                                </span></td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% else %}
                            <p class="text-muted">No upcoming appointments for this service.</p>
                        {% endif %}
                    </div>

                    <div class="mt-4 d-flex justify-content-between">
                        <a href="{% url 'appointments:service-list' %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Services
                        </a>
                        <div>
                            <a href="{% url 'appointments:service-update' service.pk %}" class="btn btn-primary">
                                <i class="fas fa-edit"></i> Edit Service
                            </a>
                            <a href="{% url 'appointments:service-delete' service.pk %}" class="btn btn-danger"
                               onclick="return confirm('Are you sure you want to delete this service? This action cannot be undone.');">
                                <i class="fas fa-trash"></i> Delete
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .card {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        border: none;
    }
    .card-header {
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    }
    .badge {
        font-size: 0.875em;
    }
</style>
{% endblock %}